<template>
  <div class="box">
    <!-- 顶部我的 -->
    <div class="box1">
      <router-link to="/personal">
        <i class="jiantou iconfont icon-jiantou2"></i>
      </router-link>
      <h2 class="wode">订单</h2>
      <i class="shezhi iconfont icon-shezhi"></i>
      <i class="shezhi1 iconfont icon-lingdang"></i>
    </div>
    <div class="box2">
      <van-card class="gowu"
                num="2"
                price="19.89"
                desc="成人蓝色盒装50片"
                title="医用口罩一次性医生防护儿童"
                thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgbres.dfcfw.com%2FFiles%2Fpicture%2F20200329%2FD7067CB97F48357FE264F428069616DF_w800h800.jpg&refer=http%3A%2F%2Fgbres.dfcfw.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621170997&t=13830ba8acfed2e89a2e2479b27462b4">
        <template #tags>
          <van-tag plain
                   type="danger"
                   style="margin-top:4px">聚划算</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">购买</van-button>
        </template>
      </van-card>
    </div>
    <div class="box3">
      <div class="heji">
        <div class="heji1">合计:</div>
        <div class="jiaqian">￥39.78</div>
        <button class="dingdan"
                @click="pay">提交订单</button>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
    };
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  //  display: flex;
  // justify-content: space-around;
}
.jiantou {
  display: block;
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  left: 4px;
  color: black;
}
.wode {
  margin-left: 45%;
  font-weight: bold;
  position: absolute;
}
.shezhi {
  margin-left: 80%;
  font-size: 18px;
  color: black;
  position: absolute;
}
.shezhi1 {
  float: right;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-right: 15px;

  color: black;
}
.gowu {
  margin-top: 10px;
}
.box3 {
  width: 100%;
  height: 60px;
  background: #f0eeee;
  // background: rgb(99, 63, 19)
  position: absolute;
  bottom: 0;
}
.heji {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.heji1 {
  position: absolute;
  left: 30%;
  font-size: 14px;
  font-weight: bold;
  top: 10%;
}
.jiaqian {
  position: absolute;
  left: 40%;
  font-size: 14px;
  color: red;
  top: 10%;
}
.dingdan {
  margin-left: 60%;
  border-radius: 20px;
  width: 80px;
  height: 40px;
  // margin-top: 4px;
  line-height: 40px;
  background: red;
  color: rgb(255, 255, 255);
  font-size: 14px;
  margin-top: 2%;
}
.tupian1 {
  width: 100px;
  height: 100px;
}
</style>